<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Flying Saucer: Tables Support</title>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen"/>
    <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print"/>
    <style type="text/css">
        body {
            padding: 30px;
        }

        h1 {
            font-family: "Century Gothic";
            text-align: right;
            font-weight: normal;
        }

        h2 {
            font-size: 100%;
            font-style: italic;
            font-weight: normal;
        }

        table {
            border: 1px solid gray;
            width: 100%;
            border-collapse: separate;
        }

        caption {
            border: 1px solid gray;
        }

        td, th {
            border: 0px solid black;
            text-align: right;
        }

        td.desc, th {
            text-align: left;
        }

        tr.odd td {
            background-color: #ccccff;
        }

        tr.even td {
            background-color: transparent;
        }

        tr.totals td.total {
            background-color: #ccccff;
        }

        table#overview td {
            border: 1px solid gray;
            padding: 5px;
        }
    </style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>

<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>

<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>

<div style="width: 100%">
    <table id="overview" cellspacing="0" cellpadding="0" style="border: 0px; width: 100%;" border="1">
        <tr>
            <td style="text-align: left; padding-bottom: 10px;"><span id="pagebyline">Tables Support</span></td>
            <td>
				<table style="border-collapse: collapse;">
					<tr>
						<td style="font-size: x-small;">thead!</td>
						<td style="font-size: x-small;">tfoot!</td>
					</tr>
					<tr>
						<td>
						<table style="border-collapse: collapse;">
							<tr>
								<td style="font-size: x-small;">tbody!</td>
								<td>
								<table style="border-collapse: collapse;">
								<tr>
									<td style="font-size: x-small;">th, tr, td!</td>
									<td style="font-size: x-small;">alignment</td>
									<td style="font-size: x-small;">collapse!</td>
								</tr>
									<tr>
										<td colspan="3">colspan!</td>
									</tr>
								</table>
								</td>
							</tr>
						</table>
						</td>
					</tr>
					<tr>
					<td colspan="3" style="font-size: x-small; font-weight: bold;">styles!</td>
					</tr>

				</table>
			</td>
        </tr>
		<tr>
			<td style="text-align: right; vertical-align: top;"><b>Tables support includes</b>:</td>
			<td style="text-align: left; vertical-align: top">Tables support is pretty complete at this point. We
				support all the table-related XHTML tags, including table, caption, tbody, thead, tfoot, th, tr and td
				tags. Table elements can have styles attached to them--in this demo, to show an alternating row
				highlight color. In-cell alignment works, as do borders and border-collapse. Colspan, rowspan,
				cellpadding and cellspacing attributes are supported. Table and column widths can be set to a
				specific or proportional (em, %) value. Also included: complex nested table 
				layouts, auto layout, floated tables, and vertical alignment within cells.
			</td>
		</tr>
	</table>
</div>
<br/>

<h1>A Sample Report</h1>

<h2>assembled by Ali Enn</h2>

<table>
    <caption>3rd Qtr Financial Results</caption>
    <thead>
        <tr>
            <th style="text-align: left;">Department</th>
            <th style="text-align: right;">Gross Sales</th>
            <th style="text-align: right;">Expenses</th>
            <th style="text-align: right;">Net Profit</th>
        </tr>
    </thead>
    <tfoot>
    <tr class="totals">
        <td class="total" colspan="4">1,000,000.00</td>
    </tr>
    </tfoot>
    <tbody>
    <tr class="odd">
        <td class="desc" style="vertical-align: top;" rowspan="6">Pets</td>
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="odd">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>

    <tr class="odd">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>

    <tr class="odd">
        <td class="desc" style="vertical-align: top;" rowspan="7">Gardening</td>
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>

    <tr class="odd">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>

    <tr class="odd">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    <tr class="even">
        <td>12345.00</td>
        <td>1020.00</td>
        <td>9000.00</td>
    </tr>
    </tbody>
</table>
</body>
</html>
